<div class="modal-dialog prevent-close modal-lg" role="document" id="filterTimeseriesDialog">
    <form class="flex-form" data-bind="submit: filterItems" autocomplete="off">
        <div class="modal-content" tabindex="-1">
            <div class="modal-header">
                <button type="button" class="close" data-bind="click: cancel" aria-hidden="true">
                    <i class="icon-cancel"></i>
                </button>
                <h4 class="modal-title">Filter Time Series Entries</h4>
            </div>
            <div class="modal-body">
                <div class="padding padding-sm">
                    <div class="form-group margin-bottom margin-bottom-xs margin-top">
                        <label class="control-label">&nbsp;</label>
                        <div class="toggle">
                            <input id="startDateToggle" type="checkbox" data-bind="checked: setStartDate" />
                            <label for="startDateToggle">Set start date</label>
                        </div>
                    </div>
                    <div data-bind="collapse: setStartDate">
                        <div class="form-group margin-bottom" data-bind="validationElement: startDateLocal">
                            <label class="control-label">Start Date</label>
                            <div class="input-group" data-bind="validationElement: startDateLocal">
                                <input type="text" class="form-control input-date" id="startDateLocal" placeholder="Enter start date"
                                       data-bind="datePicker: startDateLocal, datepickerOptions: datePickerOptions" />
                                <div class="input-group-addon">(local)</div>
                                <span class="help-block" data-bind="validationMessage: startDateLocal"></span>
                                <div data-bind="if: startDateLocal.isValid()" class="margin-left margin-top margin-top-xs">
                                    <small class="form-control-static" data-bind="text: formatLocalDateAsUtc(startDateLocal)"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group margin-bottom margin-bottom-xs margin-top">
                        <label class="control-label">&nbsp;</label>
                        <div class="toggle">
                            <input id="endDateToggle" type="checkbox" data-bind="checked: setEndDate" />
                            <label for="endDateToggle">Set end date</label>
                        </div>
                    </div>
                    <div data-bind="collapse: setEndDate">
                        <div class="form-group" data-bind="validationElement: endDateLocal">
                            <label class="control-label">End Date</label>
                            <div class="input-group" data-bind="validationElement: endDateLocal">
                                <input type="text" class="form-control input-date" id="endDateLocal" placeholder="Enter end date"
                                       data-bind="datePicker: endDateLocal, datepickerOptions: datePickerOptions" />
                                <div class="input-group-addon">(local)</div>
                                <span class="help-block" data-bind="validationMessage: endDateLocal"></span>
                                <div data-bind="if: endDateLocal.isValid()" class="margin-left margin-top margin-top-xs">
                                    <small class="form-control-static" data-bind="text: formatLocalDateAsUtc(endDateLocal)"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-bind="click: cancel">
                    <i class="icon-cancel"></i><span>Cancel</span>
                </button>
                <button type="submit" class="btn btn-primary">
                    <i class="glyphicon glyphicon-filter"></i><span class="margin-left margin-left-sm">Filter</span>
                </button>
            </div>
        </div>
    </form>
</div>
